<script setup lang="ts">
import { reactive, ref, onBeforeMount } from "vue";
// 表单MeetingManage 数据
import { Manage_Meeting } from "@/stores/MeetingManage/MeetingManage.js";

import router from "@/router";
// 接口
import { GetMeetingManage } from '@/api/Meeting';
// 时间模板
import { formatTime } from '@/utils/time';
const total = ref(0) // 总条数

const MeetingManage = Manage_Meeting();

const params = reactive({
	meetingName: '',   //  会议名称
	status: '是否开会',   //  状态
	limit: 10,   //  分页大小
	page: 1     //  当前页
})

// 获取会议列表
const getMeetingList = () => {
	GetMeetingManage({
		meetingName: params.meetingName,
		status: params.status,
		limit: params.limit,
		page: params.page,
	}).then(response => {
		MeetingManage.conference_data = response.data.data
		total.value = response.data.count
	})
}
getMeetingList()

// 分页处理
const onSizeChange = (size: any) => {
	params.page = 1
	params.limit = size
	getMeetingList()
}
const onCurrentChange = (page: any) => {
	params.page = page
	getMeetingList()
}

// 搜索
const onSubmit = () => {
	getMeetingList()
};

// 添加会议
const addClick = () => {
	router.push("/CreateMeeting");
};

// 详细
const handleClick = (row: any) => {
	// console.log(row);


	router.push({ path: "/MeetingDetails", query: { id: row } });
};
</script>

<template>
	<div style="width: 80vw; height: 100vh">
		<div class="common-layout">
			<el-container>
				<el-header class="title"> 会议管理 </el-header>
				<el-main>
					<!-- 搜索框 -->
					<div class="search">
						<el-form :inline="true" :model="MeetingManage.conference_data" class="demo-form-inline">
							<el-form-item>
								<el-input v-model="params.meetingName" placeholder="请输入会议名称" clearable />
							</el-form-item>
							<el-form-item>
								<el-select v-model="params.status" placeholder="是否开会" clearable>
									<el-option label="是否开会" value="是否开会" />
									<el-option label="已开" value="已开" />
									<el-option label="未开" value="未开" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit">搜索</el-button>
							</el-form-item>
						</el-form>
						<el-button type="primary" @click="addClick">添加会议</el-button>
					</div>
					<!-- 表格 -->
					<div class="result">
						<el-table border style="width: 100%" :data="MeetingManage.conference_data">
							<el-table-column prop="meetingName" label="会议名称" />
							<el-table-column prop="meetingStartTime" label="创建时间" width="200">
								<template #default="row">
									{{ formatTime(row.meetingStartTime) }}
								</template>
							</el-table-column>
							<el-table-column prop="meetingDeadline" label="报名截止日期" width="180">
								<template #default="row">
									{{ formatTime(row.meetingDeadline) }}
								</template>
							</el-table-column>
							<el-table-column prop="meetingApplicationNumber" label="报名人数" width="180" />
							<el-table-column fixed="right" label="操作" width="80">
								<template #default="scope">
									<el-button link type="primary" size="small" @click="handleClick(scope.row.meetingId)">详细</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<!-- 分页 -->
					<div class="pagination">
						<el-pagination v-model:current-page="params.page" v-model:page-size="params.limit" :background="true"
							layout="prev, pager, next, jumper" :total="total" @size-change="onSizeChange"
							@current-change="onCurrentChange" style="justify-content: flex-end;" pager-count="total" />
					</div>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<style scoped>
.demo-form-inline .el-input {
	--el-input-width: 220px;
}

.search {
	display: flex;
	justify-content: space-between;
}

.title {
	line-height: 55px;
	box-shadow: -1px 1px 1px 3px #f5f7fa;
}
</style>
